<script setup lang="ts">
  import { ref } from 'vue'

  defineOptions({
    name: 'ContentWarrantyPolicyCreate',
  })

  // 保修政策内容
  const warrantyPolicyContent = ref('')

  defineExpose({
    getWarrantyPolicyContent: () => {
      return warrantyPolicyContent.value
    },
    setWarrantyPolicyContent: (content: string) => {
      warrantyPolicyContent.value = content
    },
    resetWarrantyPolicyContent: () => {
      warrantyPolicyContent.value = ''
    },
  })
</script>

<template>
  <div class="content-warranty-policy-create">
    <div class="title">保修政策内容</div>
    <div class="editor-wrapper">
      <el-input
        v-model.trim="warrantyPolicyContent"
        type="textarea"
        placeholder="请输入保修政策内容"
        maxlength="800"
        show-word-limit
      ></el-input>
    </div>
  </div>
</template>

<style scoped lang="scss">
  .content-warranty-policy-create {
    display: flex;
    flex-direction: column;
    row-gap: 12px;
    height: 100%;

    .title {
      font-size: 12px;
      padding-left: 6px;
      border-left: 3px solid $primaryColor;
      font-weight: bold;
    }

    .editor-wrapper {
      flex: 1;
      height: 0;

      :deep(.el-textarea) {
        height: 100%;
        width: 100%;

        .el-textarea__inner {
          height: 100% !important;
        }
      }
    }
  }
</style>
